<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --pi: 3.14159265358979;
            --cylinder-width: 100vw; /* 圆柱体的宽度 */
            --face-count: 50; /* 面的数量，与添加的div数量相匹配 */
            --face-deg: (360deg / var(--face-count)); /* 每个面应该覆盖多少度数 */
            --face-width: (var(--cylinder-width) / var(--face-count)); /* 每个面的宽度 */
            --face-shift: (var(--cylinder-width) / var(--pi) / 2); /* 需要将面向外移动使其具有更多圆形3D效果 */
        }

        * {
            margin: 0;
            padding: 0;
        }
        .holder {
            width: 100vw;
            height: 100vh;
            transform-style: preserve-3d;
            transform: rotateX(-35deg);
        }
        .cylinder {
            position: relative;
            width: var(--cylinder-width);
            height: 100%;
            transform-style: preserve-3d;
            animation: spin 20s infinite linear;
        }
        .face {
            background: #da0060;
            opacity: 0.7;
            width: calc(var(--face-width));
            height: 500px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: 
                rotateY(calc(var(--face-deg) * var(--index))) 
                translateX(-50%) 
                translateY(-50%) 
                translateZ(calc(var(--face-shift) + 6px));
        }
        .face:nth-child(1) {
            background: purple;
        }

        @keyframes spin {
            from {
                transform: rotateY(0deg);
            }
            to {
                transform: rotateY(-360deg);
            }
        }
    </style>
</head>
<body>
    <div class="holder">
        <div class="cylinder"></div>
    </div>


    <script>
        const cylinderDom = document.querySelector('.cylinder')
        const faceCount = 50
        for (let i = 0; i < faceCount; i++) {
            const div = document.createElement('div')
            div.classList.add('face')
            div.style.cssText = `--index: ${i};`
            cylinderDom.appendChild(div)
        }
    </script>
</body>
</html>